<template>
    <view>
        <!-- 搜索框区域 -->
        <!-- <my-search bgcolor="#333" :radius="10"></my-search> -->
        <my-search @click="gotoSearch"></my-search>
        <!-- 滚动区域父容器 -->
        <view class="scroll-view-container">
            <!-- 左侧滚动区域 较窄 -->
            <scroll-view class="left-scroll-view" scroll-y="true" :style="{height:wh+'px'}">
                <block v-for="(item, i ) in cateList" :key="i">
                    <view :class="['left-scroll-view-item',i===active?'active':'']" @click="activeCate(i)">
                        {{item.cat_name}}
                    </view>
                </block>
            </scroll-view>
            <!-- 右侧滚动区域 较宽 -->
            <scroll-view class="right-scroll-view" scroll-y="true" :style="{height:wh+'px'}" :scroll-top="scrollTop">
                <!-- 二级分类容器 循环渲染二级分类  -->
                <!-- 二级分类里要包含二级分类标题 和三级分类图片 -->
                <view class="cate-level2" v-for="(item2,i2) in cateLevel2" :key="i2">
                    <!-- 二级分类标题 -->
                    <view class="cate-level2-title">/{{item2.cat_name}}/</view>
                    <!-- 三级分类列表 容器 -->
                    <view class="cate-level3-list">
                        <!-- 三级分类item项 -->
                        <view class="cate-level3-item" v-for="(item3,i3) in item2.children" :key="i3"
                            @click="gotoGoodsList(item3)">
                            <!-- 三级分类图片 -->
                            <image :src="item3.cat_icon.replace('dev','web')"></image>
                            <!-- 三级分类名称 -->
                            <text>{{item3.cat_name}}</text>
                        </view>
                    </view>
                </view>
            </scroll-view>
        </view>
        <!-- 滚动区域父容器 end-->
    </view>
</template>

<script>
    import badgeMixins from '@/mixins/badage-tabbar.js'
    export default {
        mixins: [badgeMixins],
        data() {
            return {
                // 设备视口的高度 scroll容器要自适应这个高度
                wh: 0,
                // 所有分类列表
                cateList: [],
                // 一级分类激活项 默认激活第一项
                active: 0,
                // 二级分类列表 默认激活的是第一个分类 默认保存（渲染）第一个分类的二级分类 
                // 一级分类切换时会变更这里的数据 变为对应的二级分类
                cateLevel2: [],
                // 右侧盒子被卷去的头部距离 
                scrollTop: 0
            };
        },
        onLoad() {
            // 获取用户设备的信息
            const sysInfo = uni.getSystemInfoSync()
            // console.log(sysInfo);
            this.wh = sysInfo.windowHeight - 50
            this.getCateList()
        },
        methods: {
            // 获取分类列表
            async getCateList() {
                const {
                    data: res
                } = await uni.$http.get('/api/public/v1/categories')
                // console.log(res)
                // 保存所有分类列表
                this.cateList = res.message
                //为二级分类赋值  因为默认激活第一个分类 所以默认保存分类一的二级分类 分类切换时重新赋值
                this.cateLevel2 = res.message[0].children
            },
            // 一级分类点击切换时 
            activeCate(i) {
                // 激活当前项
                this.active = i
                // 为二级分类重新赋值
                this.cateLevel2 = this.cateList[i].children
                // 右侧卷曲的头部重新赋值为0
                this.scrollTop = this.scrollTop === 0 ? 1 : 0
            },
            // 点击三级分类时 去往商品列表页 并携带当前商品的id
            gotoGoodsList(item) {
                uni.navigateTo({
                    url: `/subpck/goods_list/goods_list?cid=${item.cat_id}`
                })
            },
            // 点击搜索去往搜索页
            gotoSearch() {
                uni.navigateTo({
                    url: '/subpck/search/search'
                })
            }
        }

    }
</script>

<style lang="scss">
    .scroll-view-container {
        display: flex;

        .left-scroll-view {
            width: 120px;
        }
    }

    .left-scroll-view-item {
        line-height: 60px;
        background-color: #f7f7f7;
        text-align: center;
        font-size: 12px;

        &.active {
            background-color: #fff;
            position: relative;

            &::before {
                content: '';
                position: absolute;
                top: 50%;
                left: 0;
                transform: translateY(-50%);
                width: 3px;
                height: 30px;
                background-color: #c00000;
            }
        }
    }

    .cate-level2-title {
        font-size: 12px;
        font-weight: bold;
        text-align: center;
        padding: 15px 0;
    }

    .cate-level3-list {
        display: flex;
        flex-wrap: wrap;


        .cate-level3-item {
            width: 33.33%;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            margin-bottom: 10px;

            image {
                width: 60px;
                height: 60px;
            }

            text {
                font-size: 12px;
            }
        }
    }
</style>
